<template>
  <el-main>

  <el-row>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  style=" text-align: left;">
        <el-form-item label="标题" prop="title" >
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>

        <el-form-item label="类别" prop="category_id">
          <el-select v-model="ruleForm.category_id"  placeholder="请选择类别">

            <el-option key="1" :value="1" label="了解专升本"></el-option>
            <el-option key="2" :value="2" label="升本大纲"></el-option>
            <el-option key="3" :value="3" label="经验分享"></el-option>

          </el-select>
        </el-form-item>


        <el-form-item label="介绍" prop="introduction" >
          <el-input  type="textarea" v-model="ruleForm.introduction"></el-input>
        </el-form-item>


        <el-form-item label="文章内容" prop="content">


          <vue-ueditor-wrap ref="editor" v-model="ruleForm.content"></vue-ueditor-wrap>

        </el-form-item>




        <el-form-item label="上传图片">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="/api/upload"
            name = "fileData"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="ruleForm.cover_url" :src="ruleForm.cover_url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>


        <el-form-item label="是否发布" prop="has_published" >
          <el-radio-group v-model="ruleForm.state">
            <el-radio :label=1>直接发布</el-radio>
            <el-radio :label=2>不直接发布</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="updateTarget()">确 定</el-button>
        </el-form-item>
      </el-form>

  </el-row>

  </el-main>



</template>

<script>
  import VueUeditorWrap from 'vue-ueditor-wrap'
	export default {
    components: {VueUeditorWrap},
		name: "post-edit",
    data() {
		  return {
        allCategoryList:[],
        ruleForm: {
          id:'',
          cover_url:'',
          title: '',
          category_id:'',
          state:1,
          introduction:'',
          content:''
        },
        rules: {
          title: [
            {required: true, message: '请输入名称', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
          ],
          category_id: [
            {required: true, message: '请选择文章类型', trigger: 'blur'}
          ],
          introduction: [
            {required: true, message: '请输入介绍', trigger: 'blur'},
            {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}

          ]
        }
      }

    },
    mounted: function () {
      this.postGet();
    },
    methods: {
      postGet() {
        var _this = this;
        this.postRequest("/post/list/get", {id:_this.$route.query.post_id}).then(resp => {
          if (resp && resp.status == 200) {
          	let data = resp.data.data;
            _this.ruleForm.title = data.data.title;
            _this.ruleForm.id = data.data.id;
            _this.ruleForm.category_id = data.data.category_id;
            _this.ruleForm.state = data.data.state;
            _this.ruleForm.cover_url = data.data.cover_url;
            _this.ruleForm.introduction = data.data.introduction;
            _this.ruleForm.content = data.data.content
          }
        })



      },
      handleAvatarSuccess(res, url) {
        this.ruleForm.cover_url = res.url;
      },
      beforeAvatarUpload(file) {
        const isJPG = (file.type === 'image/jpeg' || file.type === 'image/gif'
          || file.type === 'image/png');
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      updateTarget() {
        var _this = this;
        this.postRequest("/post/list/update",_this.ruleForm).then(resp=> {
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.$message({type: data.result, message: data.msg});
          }
        })


      }
    }
	}
</script>

<style scoped>

</style>
